<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <meta itemprop="name" content="晶钻工业科技-宁波晶钻工业科技有限公司">
    <meta name="keywords" content="晶钻工业科技、宁波晶钻工业科技有限公司、宁波晶钻">
    <meta name="description" itemprop="description" content="宁波晶钻工业科技有限公司坐落于美丽的东海之滨-宁波市，公司拥有多名跨行业外籍及海归研究员、教授、博士，与中国科学院宁波材料所共建技术研发中心，并同日本、美国多家跨国公司、大学、研究所建立长期战略联盟..." >
    <title>文章列表</title>
    <link rel="shortcut icon" href="../../../logo.ico"/> 
    <link rel="stylesheet" href="__PUBLIC__/css/article_list.css"/>
</head>
<body>

  <!-- 网站首页头部 start -->
  <include file="Public:header" />
  <!-- 网站首页头部 end -->

  <!-- 网站文章列表页主体 start -->
  <main class="site-article-wrapper">
    <section class="article-header">
      <a href="{:U('articleDetail')}">
        <img src="__PUBLIC__/img/article/list/banner.jpg" alt="文章图片">
      </a>
    </section>
    <!-- 文章列表 start -->
    <section class="site-article-list wrapper">
      <ul class="article-list">
        <!-- 单图 -->
        <li class="article-item">
          <article class="article-contain">
            <div class="article-img">
              <img src="__PUBLIC__/img/article/list/article1.jpg" alt="文章图片">
            </div>
            <div class="article-time">
              <time>04 January 2017</time>
              <span><em>Tobias Mellers.</em>Fashion</span>
            </div>
            <h1 class="article-title">Phasellus congue tortor eu massa ticidunt,sollictudin</h1>
            <p class="article-content">Lorem ipsum sit amel,Lorem ipsum sit amel,Lorem ipsum sit amel,Lorem ipsum sit amel,Lorem ipsum sit amel,Lorem ipsum sit amel,Lorem ipsum sit amel,Lorem ipsum sit amel,Lorem ipsum sit amel,Lorem ipsum sit amel,Lorem ipsum sit amel,Lorem ipsum sit amel,Lorem ipsum sit amel,Lorem ipsum sit amel,Lorem ipsum sit amel,Lorem ipsum sit amel.</p>
            <a href="{:U('articleDetail')}" class="read-more-btn">Read More</a>
          </article>
        </li>
        <!-- 弹窗视频 -->
        <li class="article-item">
          <article class="article-contain">
            <div class="article-video">
              <img src="__PUBLIC__/img/article/list/article2.jpg" alt="文章图片">
              <i class="icon-play" data-playsrc="http://7xnmx8.com2.z0.glb.clouddn.com/Challenge%20Alps.mp4"></i>
            </div>
            <div class="article-time">
              <time>04 January 2017</time>
              <span>
                <em>Tobias Mellers.</em>Fashion</span>
            </div>
            <h1 class="article-title">Phasellus congue tortor eu massa ticidunt,sollictudin</h1>
            <p class="article-content">Lorem ipsum sit amel,Lorem ipsum sit amel,Lorem ipsum sit amel,Lorem ipsum sit amel,Lorem ipsum sit amel,Lorem ipsum
              sit amel,Lorem ipsum sit amel,Lorem ipsum sit amel,Lorem ipsum sit amel,Lorem ipsum sit amel,Lorem ipsum sit amel,Lorem
              ipsum sit amel,Lorem ipsum sit amel,Lorem ipsum sit amel,Lorem ipsum sit amel,Lorem ipsum sit amel.</p>
            <a href="{:U('articleDetail')}" class="read-more-btn">Read More</a>
          </article>
        </li>
        <!-- 多图 -->
        <li class="article-item">
          <article class="article-contain">
            <div class="article-img-more">
              <ul class="article-img-list" id="article_img_list">
                <li><img src="__PUBLIC__/img/article/list/article3.jpg" alt="文章图片"></li>
                <li><img src="__PUBLIC__/img/article/list/article1.jpg" alt="文章图片"></li>
                <li><img src="__PUBLIC__/img/article/list/article2.jpg" alt="文章图片"></li>
                <li><img src="__PUBLIC__/img/article/list/article4.jpg" alt="文章图片"></li>
              </ul>
              <ol class="article-img-num" id="article_img_num">
                <li class="active" data-slide-to="0"></li>
                <li data-slide-to="1"></li>
                <li data-slide-to="2"></li>
                <li data-slide-to="3"></li>
              </ol>
            </div>
            <div class="article-time">
              <time>04 January 2017</time>
              <span>
                <em>Tobias Mellers.</em>Fashion</span>
            </div>
            <h1 class="article-title">Phasellus congue tortor eu massa ticidunt,sollictudin</h1>
            <p class="article-content">Lorem ipsum sit amel,Lorem ipsum sit amel,Lorem ipsum sit amel,Lorem ipsum sit amel,Lorem ipsum sit amel,Lorem ipsum
              sit amel,Lorem ipsum sit amel,Lorem ipsum sit amel,Lorem ipsum sit amel,Lorem ipsum sit amel,Lorem ipsum sit amel,Lorem
              ipsum sit amel,Lorem ipsum sit amel,Lorem ipsum sit amel,Lorem ipsum sit amel,Lorem ipsum sit amel.</p>
            <a href="{:U('articleDetail')}" class="read-more-btn">Read More</a>
          </article>
        </li>
        <!-- 视频播放 -->
        <li class="article-item">
          <article class="article-contain">
            <div class="article-video">
              <video src="http://7xnmx8.com2.z0.glb.clouddn.com/Challenge%20Alps.mp4" controls muted poster="__PUBLIC__/img/article/list/article4.jpg">您的浏览器不支持 audio 标签。</video>
            </div>
            <div class="article-time">
              <time>04 January 2017</time>
              <span>
                <em>Tobias Mellers.</em>Fashion</span>
            </div>
            <h1 class="article-title">Phasellus congue tortor eu massa ticidunt,sollictudin</h1>
            <p class="article-content">Lorem ipsum sit amel,Lorem ipsum sit amel,Lorem ipsum sit amel,Lorem ipsum sit amel,Lorem ipsum sit amel,Lorem ipsum
              sit amel,Lorem ipsum sit amel,Lorem ipsum sit amel,Lorem ipsum sit amel,Lorem ipsum sit amel,Lorem ipsum sit amel,Lorem
              ipsum sit amel,Lorem ipsum sit amel,Lorem ipsum sit amel,Lorem ipsum sit amel,Lorem ipsum sit amel.</p>
            <a href="{:U('articleDetail')}" class="read-more-btn">Read More</a>
          </article>
        </li>
      </ul>
      <div class="site-article-pages" id="site_article_pages">
        <span class="pre-page"></span>
        <a href="#" class="txt-page-tag active">1</a>
        <a href="#" class="txt-page-tag">2</a>
        <a href="#" class="txt-page-tag">3</a>
        <a href="#" class="txt-page-tag">4</a>
        <span class="next-page"></span>
      </div>
    </section>
    <!-- 文章列表 end -->    
  </main>
  <!-- 网站文章列表页主体 end -->

  <!-- 网站文章列表页底部 start -->
  <include file="Public:footer" />
  <!-- 网站文章列表页底部 end -->

  <!-- mask 遮罩层 start -->
  <div class="mask" id="mask"></div>
  <!-- mask 遮罩层 end -->

  <!-- 视频播放部分 start -->
  <section class="play-video-box" id="play_video_box">
    <video id="play_video_tag"></video>
  </section>
  <!-- 视频播放部分 end -->
  
  <!-- 引入相关的js文件 start -->
  <!-- 条件注释：如果IE浏览器的版本小于9则引入该文件以支持html5的新标签 -->
  <!--[if lt IE 9]>
  <script src="__PUBLIC__/js/html5shiv.js"></script>
  <![endif]-->
  <script src="__PUBLIC__/js/jquery.min.js"></script>
  <script src="__PUBLIC__/js/common.js"></script>
  <script src="__PUBLIC__/js/article_list.js"></script>
  <!-- 引入相关的js文件 end -->

</body>
</html>